import React from "react"
import Ionicon from "react-ionicons"
import PropTypes from 'prop-types'

export default function PriceList({
  items,
  onModifyItem,
  onDeleteItem
}) {
  return (
    // .list-grop-flush 属性用于删除列表周围的边框
    <ul className="list-group" style={{marginTop:'10px'}}>
      {items.map(item => (
        <li
        className="list-group-item d-flex justify-content-between align-items-center"
          key={item.id}
        >
          <span className="col-1 badge badge-primary">
            <Ionicon 
              className="rounded-circle"
              fontSize="30px"
              style={{ backgroundColor: "#007bff", padding: "5px" }}
              color={"#fff"}
              icon={item.category.iconName}
            />
          </span>
          <span className="col-5">{item.title}</span>
          <span className="col-2 font-weight-bold">
            {item.category.type === "income" ? '+'+item.price : '-'+item.price}元
          </span>
          <span className="col-2">{item.date}</span>
          <a href="#1"
            className="col-1"
            onClick={(event) => {
              event.preventDefault()
              onModifyItem(item)
            }}
          >
            <Ionicon
              className="rounded-circle"
              fontSize="30px"
              style={{ backgroundColor: "#28a745", padding: "5px" }}
              color={"#fff"}
              icon="ios-create-outline"
            />
          </a>
          <a href="#1"
            className="col-1"
            onClick={() => {
              onDeleteItem(item)
            }}
          >
            <Ionicon
              className="rounded-circle"
              fontSize="30px"
              style={{ backgroundColor: "#dc3545", padding: "5px" }}
              color={"#fff"}
              icon="ios-close"
            />
          </a>
        </li>
      ))}
    </ul>
  )
}

PriceList.propTypes = {
  items: PropTypes.array.isRequired,
  onModifyItem: PropTypes.func.isRequired,
  onDeleteItem: PropTypes.func.isRequired
}
